<template>
  <div class="box-size">
    <div style="text-align: center">
      <h1>发布新活动</h1>
      <div>填写以下信息，发布你的校园活动</div>
    </div>
    <el-steps style="max-width: 600px;margin: 0 auto" :active="step" align-center>
      <el-step title="基本信息" description="填写活动的基本信息"/>
      <el-step title="详细内容" description="填写活动的详细内容"/>
      <el-step title="活动风采" description="请上传活动风采图"/>
    </el-steps>
    <el-card shadow="never" style="margin: 0 auto;width: 1000px" v-if="step===1">
      <el-form v-model="createEvent" label-position="top" size="large">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动标题">
              <el-input v-model="createEvent.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动分类" style="width: 100%;">
              <el-cascader v-model="createEvent.categoryId" style="width: 100%" :options="categoryList"
                           :props="categoryProps"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动开始时间">
              <el-date-picker
                  v-model="createEvent.startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间">
              <el-date-picker
                  v-model="createEvent.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="活动地点">
          <el-input v-model="createEvent.location"></el-input>
        </el-form-item>
        <el-form-item label="举办方">
          <el-input v-model="createEvent.organizer"></el-input>
        </el-form-item>
        <el-form-item label="活动描述">
          <el-input v-model="createEvent.description"></el-input>
        </el-form-item>
        <el-form-item label="宣传封面">
          <el-upload
              class="avatar-uploader"
              :action="$fileUpload"
              :headers="$getHeaders"
              :data="{sceneCode:'social:event:cover'}"
              :show-file-list="false"
              :on-success="handleCoverSuccess"
          >
            <img v-if="createEvent.cover" :src="createEvent.cover" class="avatar" alt="显示图片"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="next" style="width: 100%;">下一步</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-if="step===2">
      <tinymce-edider v-model="createEvent.content"
                      scene-code="user:event"></tinymce-edider>
      <el-row justify="center">
        <el-col :span="2">
          <el-button type="primary" @click="step--" size="large">上一步</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="next" size="large">下一步</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="step===3">
      <el-upload
          class="avatar-uploader"
          :file-list="fileList"
          :action="$fileUpload"
          :headers="$getHeaders"
          :data="{sceneCode:'social:event:mien'}"
          list-type="picture-card"
          :on-success="handleMienSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
      >
        <img v-if="createEvent.cover" :src="createEvent.cover" class="avatar" alt="显示图片"/>
        <el-icon v-else class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
      <el-row justify="center">
        <el-col :span="2">
          <el-button type="primary" @click="step--" size="large">上一步</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="submitCreateEvent" size="large">发布</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {reqAddEvent, reqGetEventCategoryList, reqGetEventInfo, reqUpdateEvent} from '@/api/social/event'
import {useRoute} from "vue-router";
import type { UploadProps, UploadUserFile } from 'element-plus'
import TinymceEdider from "@/components/rich-text/TinymceEdider.vue";

let route = useRoute()
let createEvent = reactive({
  eventId: null,
  title: "",
  cover: "",
  content: "",
  categoryId: 0,
  description: "",
  location: "",
  status: 0,
  startTime: null,
  endTime: null,
  organizer: '',
  miens: []
})
let step = ref(1)
let categoryList = ref([])
const fileList = ref([])
let categoryProps = {
  value: 'id',
  label: 'name',
  children: 'children',
  emitPath: false,
  checkStrictly: true
}
let handleCoverSuccess = (res) => {
  createEvent.cover = res.data.visitPath
}
let handleMienSuccess = (res) => {
  createEvent.miens.push(res.data.visitPath)
}
let getEventCategory = () => {
  reqGetEventCategoryList().then(res => {
    categoryList.value = res.data
  })
}

let next = () => {
  step.value++
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.visitPath
  dialogVisible.value = true
}
let submitCreateEvent = () => {
  if (route.query.eventId) {
    reqUpdateEvent(createEvent)
  } else {
    reqAddEvent(createEvent)
  }
}
let getEventInfo = () => {
  reqGetEventInfo(String(route.query.eventId)).then(res => {
    Object.assign(createEvent, res.data)
  })
}
onMounted(() => {
  getEventCategory()
  if (route.query.eventId) {
    getEventInfo()
  }
})
</script>

<style scoped>
.box-size {
  width: 1400px;
  margin: 0 auto;
}
</style>
